<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

       /* 设置样式 */
       *{
           margin: 0;
           padding: 0;
       }
       button{
           margin-top: 20px;
           margin-right: 10px;
       }
        dl{
            margin-bottom: 50px;
            /* margin-bottom: 100px; */
            border: 1px solid #888888;
            width: 220px;
            height: 330px;
            float: left;
            text-align: left;
            margin-top: 20px;
        }
        dt{ border: none;
            width: 69px;
            height: 138px;
        }
        dt img{
            margin-top: 20px;
            width: 195px;
            height: 138px;
        }
        h2{
            font-size: 17px;
            line-height: 17px;
            color: black;
            margin-top: 35px;
            margin-bottom: 25px;
        }
        p{

            line-height: 17px;
            font-size: 16px;
            color: #000000;
            margin-bottom: 1px;

        }
        dd{
            border: none;
        }
      dd p:nth-of-type(2) span{
        font-size: 12px;
        text-decoration: line-through;
      }
      dd p:nth-of-type(3) span{
        font-size: 12px;
        color: #ff0000;
      }
    </style>
</head>
<body>
        <!-- ========================设置按钮 -->
        <button id="btn1">点击按价格排序</button>
        <button id="btn2">点击按销量排序</button>
        <button id="btn3">点击评价排序</button>
        <!-- 设置box -->
        <div id="box">
            <!-- ======================设置一个结构并设置样式用于拼接 -->
            <!-- <dl>
            <dt><img src="img/honor7.jpg" alt=""></dt>
            <dd>
                <h2>iphone7 plugs</h2>
                <p>颜色:<span>土豪金</span></p>
                <p>原价: <span>5899.00</span></p>
                <p>现价:<span>￥5888.00</span></p>
                <span>销量：xxx</span>
                <span>评价：xxx</span>
            </dd>
            </dl> -->
        </div>
  



        <script>
            // 设置数组，对象为数据内容
              var data = [{
            id: '001',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5899.00,
            sale: 5888.00,
            color: '土豪金',
            evaluate: 288,
            sales: 1230
        }, {
            id: '002',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3899.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 289,
            sales: 439
        }, {
            id: '003',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 438,
            sales: 908
        }, {
            id: '004',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5999.00,
            sale: 5808.00,
            color: '土豪金',
            evaluate: 223,
            sales: 986
        }, {
            id: '005',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3892.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 88,
            sales: 8798
        }, {
            id: '006',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1929.00,
            sale: 1099.00,
            color: '白色',
            evaluate: 2088,
            sales: 453
        }, {
            id: '007',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 4899.00,
            sale: 2888.00,
            color: '土豪金',
            evaluate: 2880,
            sales: 88
        }, {
            id: '008',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 5876.00,
            sale: 998.00,
            color: '黑色',
            evaluate: 3288,
            sales: 99
        }, {
            id: '009',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 4999.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 1288,
            sales: 645
        }, {
            id: '010',
            name: 'iphone7 plugs',
            imgurl: 'img/ip7.jpg',
            price: 5888.00,
            sale: 2899.00,
            color: '土豪金',
            evaluate: 2288,
            sales: 34
        }, {
            id: '011',
            name: 'Note7',
            imgurl: 'img/note7.jpg',
            price: 3299.00,
            sale: 978.00,
            color: '黑色',
            evaluate: 28,
            sales: 1213
        }, {
            id: '012',
            name: '荣耀7',
            imgurl: 'img/honor7.jpg',
            price: 1976.00,
            sale: 1899.00,
            color: '白色',
            evaluate: 3243,
            sales: 123
        }];
      

            // 包装函数用于点击时调用
            function fn(){
                for(var i = 0;i< data.length;i++){
                // 把拼接好的结构放到设置好的div里
                box.innerHTML +='<dl>'+
                                '<dt><img src="../'+data[i].imgurl +'" alt=""></dt>'+
                                '<dd>'+
                                    '<h2>'+data[i].name+''+data[i].id+'</h2>'+
                                    '<p>颜色:<span>'+data[i].color+'</span></p>'+
                                    '<p>原价: <span>'+data[i].price+'</span></p>'+
                                    '<p>现价:<span>￥'+data[i].sale+'</span></p>'+
                                    '<span>评价：'+data[i].evaluate+'</span>'+'</br>'+
                                    '<span>销量：'+data[i].sales+'</span>'+
                                '</dd>'+
                                '</dl>'
                }
            }

            // 调用封装好的函数先给div装内容
            fn()

        // 设置绑定点击事件  按现价sale排序
            btn1.onclick = function(){
                // 清空divinnerHTML
            box.innerHTML = ''
            // 按现价排序
            data.sort(function(a,b){return b.sale - a.sale})
            fn()
            }
        // 设置绑定点击事件  按销量sales排序
            btn2.onclick = function(){
                 // 清空divinnerHTML
                box.innerHTML = ''
                // 按销量排序
                data.sort(function(a,b){return b.sales - a.sales})
                fn()
            }
        // 设置绑定点击事件  按评价evalute排序
            btn3.onclick = function(){
                //清空divinnerHTML
                box.innerHTML = ''
                // 按评价排序
                data.sort(function(a,b){return b.evaluate - a.evaluate})
                fn()
            }
        </script>
</body>
</html>